<template>
  <div>
      <h1 align='center'>登录</h1>
      <el-form :model="form" label-width="4rem">
        <el-form-item label="用户名:">
            <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
            <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="">
            <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import {postLogin} from '@/http/api.js'
export default {
    data(){
        return{
            form:{}
        }
    },
    methods:{
        login(){
            postLogin(this.form).then(resp=>{
                alert(resp.data.msg)
                if (resp.data.code = 200){
                    sessionStorage.setItem('token',resp.data.token)
                    sessionStorage.setItem('username',this.form.username)
                    this.$router.push('/')
               }
                
            }).catch(error=>{
                console.log(error)
            })
        }
    },
    created(){

    }
}
</script>

<style>
    .el-form{
        width: 500px;
        margin: 50px auto;
    }
</style>